<template>
    <div class="content_base">
        <div class="upTo">
            <h2 class='title'>修改{{upTo.dikeName}}进度月报信息</h2>
             <el-form :model="upTo" label-position = 'right' class="clearfix" :rules="rules" ref="upTo" status-icon >
              <el-form-item label="圩堤名称：">
                <div class="wid">{{upTo.dikeName}}</div>
                </el-form-item>
              <el-form-item label="所在设区市：" class='right'>
                <div class="wid">{{upTo.city}}</div>
              </el-form-item>
              <el-form-item label="属地：">
                <div class="wid">{{upTo.county}}</div> 
              </el-form-item> 
              <el-form-item label="初设批复治理长度（km）：" prop='initPermissibleLength' class='right'>
                <el-input v-model.number="upTo.initPermissibleLength"></el-input>
              </el-form-item>
              <el-form-item label="初设批复投资（万元）：" prop='initPermissibleInvest'>
                <el-input v-model.number="upTo.initPermissibleInvest"></el-input>
              </el-form-item>
              <el-form-item label="主体工程投资（万元）：" prop='mainProjectInvest'  class='right'>
                <el-input v-model.number="upTo.mainProjectInvest"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="sureUpto('upTo')">确认修改</el-button>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
              //上报的数据
          upTo:{
                  dikeName:'', 
                  city:'', 
                  county:'',
                  initPermissibleLength:'',
                  initPermissibleInvest:'',
                  mainProjectInvest:''
             },
          rules:{
            initPermissibleLength:[{ type:'number',required: true, trigger: 'blur',message:'请填写数据'}],
            initPermissibleInvest:[{type:'number', required: true, trigger: 'blur',message:'请填写数据' }],
            mainProjectInvest:[{type:'number', required: true, trigger: 'blur',message:'请填写数据'}]
          },
           //本条数据的代码
           dikeCode:null,
        }
    },
    methods:{
       //获得三条基本的数据
         getBaseData(upTo){
            var _this = this ;
            var text = []
            var thisDate = (new Date()).getTime()
          
            this.$axios.get(`/dikeInfo/getdikeinfobycode/${this.dikeCode}`,{params:{
               thisDate:thisDate
             }}).then(function(res){
                  var data  = res.data.responseData
                  upTo.dikeName=data.dikeName
                  upTo.city=data.city
                  upTo.county=data.county  
            })
           
        },
        //确认上报点击事件
        sureUpto(upTo){
          var _this = this 
          this.$refs[upTo].validate((valid) => {
          if (valid) {
            upTo = _this[upTo]
            this.postData(upTo)
            //更新数据
            this.getNewData()
          } else {
            return false;
          }
        })
      },
        //确认上报---------发送请求
        postData(upTo){
          var _this = this
          var thisDate = (new Date()).getTime()
          upTo.thisDate = thisDate
          this.$axios.get(`/projectprocess/updateprocesssinfo/${this.dikeCode}`,{params:upTo}).then(function(res){
            var data = res.data.responseMessage
            if(data=='SUCCESS'){
              _this.$message({
                    message: '修改成功',
                    type: 'success'
                  });
              _this.$router.push({name:'zijing'})
            }else{
               _this.$message({
                    message: data
                  });
            }
                
          }).catch(function(err){
            console.log(err)
          })
        },
        //获得第一个月上报的数据
        getNewData(){
          var _this = this 
          var thisDate = (new Date()).getTime()
          this.$axios.get(`/dikeInfo/getfirstmonthinfo/PRO/${this.dikeCode}`,{params:{
              thisDate:thisDate
            }}).then(function(res){
             var codeMes = res.data.responseCode
             if(codeMes=='101'){
                    _this.$router.push({name:'login'})
               }else{
               var data = res.data.responseData.data  
               if(data){
                   for(var item in _this.upTo){
                     _this.upTo[item] = data[item]?data[item]:''
                   }
                 }
             }
          })
          _this.getBaseData(_this.upTo)
        },

    },

    mounted(){
        var _this = this
        this.dikeCode = this.$route.params.dikeCode;
       
        //获得已经上报了的数据
        _this.getNewData()
    }
}
</script>

<style scoped>
   .clearfix:after{
        content: '';
        height: 0;
        clear: both;
        display: block;
   }
   .title{
       height: 100px;
       line-height: 100px;

   }
   .upTo{
       width: 90%;
       margin: 0 auto;
   }
   .upTo .el-form-item{
       width: 40%;
       float: left;
       /* min-width: 474px */
       position: relative;
       margin-left:6%

   }
   /* .el-form{
     margin:0 auto;
     width:1200px;
   } */
   /* .el-form .right{
     float:right
   } */
   .el-form-item .wid{
     width: 52%;
     float: right;
     text-align: left
   }
   .el-input{
       width:40%;
       position: absolute;
       left:250px;
       float: right;

   }
   .el-textarea{
     width: 40%;

   }
   .dialog-footer{
       height: 100px;
       line-height: 100px;
       margin-top:40px
   }
   .el-date-editor.el-input, .el-date-editor.el-input__inner{
     width: 200px!important;
     position: absolute;
     /* float: right; */
     /* float: left; */
     left: 200px;
     }
    .wid{
      width: 200px!important;
      float: left!important;
      margin-left: 50px;
    }
</style>

